<template>
  <div class="schedule-list">
    <el-table
      :data="scheduleListFormat"
      border
    >
      <el-table-column label="日期" prop="date" />
      <el-table-column label="车辆名称" prop="carName">
        <template v-slot="{ row }">
          <el-tooltip
            placement="bottom"
            effect="light"
            popper-class="custom-tooltip"
          >
            <div class="flex pointer" style="align-items: center;">
              <span class="line-clamp-1">{{ row.carName }}</span>
              <i class="el-icon-view" style="color: #1890FF;margin-left: 5px;" />
            </div>
            <template #content>
              <div class="event-popover" style="width: 120px;">
                <div class="event-popover__title">
                  {{ row.carName }}
                </div>

                <div class="event-popover__info">
                  <span>核载：{{ row.load_capacity }}人</span>
                </div>
                <div class="event-popover__info">
                  <el-tag :type="row.is_available === 1 ? 'success' : 'danger'">
                    {{ row.is_available === 1 ? '可用' : '不可用' }}
                  </el-tag>
                </div>
              </div>
            </template>
          </el-tooltip>

        </template>
      </el-table-column>
      <el-table-column
        label="预约情况"
        prop="events"
        width="1300px"
      >
        <template v-slot="{ row }">
          <div class="events-warp">
            <div class="events-warp__list">
              <el-tooltip
                v-for="(event, eIndex) in row?.events"
                :key="'event_' + eIndex"
                placement="bottom"
                effect="light"
                popper-class="custom-tooltip"
              >
                <div class="events-warp__list__item pointer">
                  <span class="line-clamp-1">
                    {{ event.car_reason }} ({{ dayjs(event?.vehicle_usage_time).format('HH:mm') }})
                  </span>
                </div>
                <template #content>
                  <div class="event-popover">
                    <div class="event-popover__title">
                      {{ event?.car_reason }}
                    </div>

                    <div class="event-popover__info">
                      <i class="el-icon-time" />
                      <span>{{ event?.vehicle_usage_time }}</span>
                    </div>
                    <div class="event-popover__info">
                      <i class="el-icon-user" />
                      <span>{{ event?.user?.username }}</span>
                    </div>
                    <div
                      class="flex event-popover__info"
                      style="justify-content: flex-end"
                    >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="handleViewDetail(event)"
                      >
                        查看详情
                      </el-button>
                    </div>
                  </div>
                </template>
              </el-tooltip>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <UseCarDetailDrawer
      :visible.sync="useCarRecordingDrawVisible"
      :record-id="currentRecording"
      :show-icon="false"
      title="用车申请详情"
    />
  </div>
</template>
<script>
import dayjs from 'dayjs'
import UseCarDetailDrawer from '@/views/vehicleService/components/useCarApplication/UseCarDetailDrawer.vue'

export default {
  name: 'VehicleScheduleList',
  components: { UseCarDetailDrawer },
  props: {
    scheduleList: {
      type: Array,
      default: () => []
    },

    date: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      useCarRecordingDrawVisible: false,
      currentRecording: null
    }
  },
  computed: {
    scheduleListFormat() {
      return this.scheduleList.map(item => {
        console.log('item --------->', item)
        return {
          id: item.id,
          date: this.getResourceDate,
          carName: item?.license_plate_number
            ? `${item?.type?.name}-${item?.license_plate_number}` : item?.type?.name,
          load_capacity: item?.load_capacity,
          is_available: item?.is_available,
          events: item?.dispatch_vehicles
        }
      })
    },

    getResourceDate() {
      return this.date ? dayjs(this.date).format('MM-DD') : dayjs().format('MM-DD')
    }
  },
  methods: {
    dayjs,

    handleViewDetail(event) {
      this.currentRecording = event.id
      this.useCarRecordingDrawVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.schedule-list {
  .events-warp {
    width: 100%;
    overflow-x: auto;

    &__list {
      display: flex;
      &__item {
        max-width: 10%;
        flex-shrink: 0;
        padding: 12px 16px;
        background-color: #D9ECFF;
        border-radius: 4px;
        border-left: 4px solid #1890FF;
        color: #303133;
        font-size: 14px;
        margin-right: 10px;
      }
    }
  }
}

.event-popover {
  &__title {
    color: #303133;
    font-size: 14px;
    font-weight: 700;
  }

  &__info {
    color: #606266;
    margin-top: 8px;
    font-size: 12px;
    > i {
      margin-right: 5px;
    }
  }
}
</style>
